<template>
  <div class="wrapper">
    <el-container>
      <el-header>
        <div>
          <img src="@/assets/1.png" alt="" />
          <span>{{ title }}</span>
        </div>
        <el-button @click="layout">退出</el-button>
      </el-header>
      <el-container>
        <el-aside :width="isCollapse ? '63px' : '200px'">
          <p @click="isCollapse = !isCollapse">|||</p>
          <el-menu
            class="el-menu-vertical-demo"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
            router
            :collapse="isCollapse"
            :collapse-transition="true"
          >
            <el-submenu
              :index="item.id + ''"
              v-for="(item, key) in menus"
              :key="item.id"
            >
              <template slot="title">
                <i :class="iscon[key]"></i>
                <span>{{ item.authName }}</span>
              </template>
              <el-menu-item-group>
                <el-menu-item
                  :index="'/'+child.path"
                  v-for="child in item.children"
                  :key="child.id"
                  >{{ child.authName }}</el-menu-item
                >
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <el-breadcrumb
            v-if="path != 'Welcome'"
            separator-class="el-icon-arrow-right"
          >
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>{{ parent }}</el-breadcrumb-item>
            <el-breadcrumb-item>{{ child }}</el-breadcrumb-item>
          </el-breadcrumb>
          <div class="card">
            <router-view></router-view>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { MessageBox, Message } from "element-ui";
export default {
  name: "Home",
  data() {
    return {
      isCollapse: false,
      title: process.env.VUE_APP_TITLE,
      path: "",
      child: {},
      parent: {},
      iscon: [
        "el-icon-user-solid",
        "el-icon-s-goods",
        "el-icon-picture",
        "el-icon-star-on",
        "el-icon-s-flag",
      ],
    };
  },
  created() {
    this.findName();
  },
  updated() {
    this.findName();
  },
  methods: {
    layout() {
      MessageBox.confirm("确定要退出嘛？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          Message({
            type: "success",
            message: "退出成功!",
          });
          this.$store.dispatch("out");
          this.$router.push("/Login");
        })
        .catch(() => {
          Message({
            type: "info",
            message: "已取消退出",
          });
        });
    },

    findName() {
      this.path = this.$route.path.replace("/", "");
      for (const parent of this.menus) {
        for (const child of parent.children) {
          if (child.path == this.path) {
            this.parent = parent.authName;
            this.child = child.authName;
            return;
          }
        }
      }
    },
  },
  computed: {
    ...mapState(["menus"]),
  },
};
</script>

<style scoped lang="scss">
.wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  .el-header {
    width: 100%;
    height: 70px;
    background: #373f41;
    display: flex;
    justify-content: space-between;
    align-items: center;
    div {
      display: flex;
      align-items: center;
    }
    span {
      color: #fff;
      font-size: 25px;
      margin-left: 5px;
    }
    button {
      margin-right: 15px;
    }
  }
  section {
    flex: 1;
    display: flex;
    overflow: hidden;
    .el-aside {
      width: 200px;
      height: 100%;
      background: #333744;

      p {
        width: 100%;
        height: 20px;
        background: #4a5064;
        color: #fff;
        text-align: center;
        line-height: 20px;
      }
    }
    .el-main {
      flex: 1;
      background: #eee;
      .card {
        margin-top: 20px;
      }
    }
  }
}
</style>
